<template>
    <div class="article-page">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>面经后台</el-breadcrumb-item>
        <el-breadcrumb-item>面经管理</el-breadcrumb-item>
      </el-breadcrumb>
      <el-card shadow="never" border="false">
        <template #header>
          <div class="header">
            <span>共 {{ pageTotal }} 条记录</span>
            <el-button
              @click="openDrawer('add')"
              icon="el-icon-plus"
              size="small"
              type="primary"
              round>
              添加面经
            </el-button>
          </div>
        </template>
        <el-table :data="list" stripe style="width: 100%">
            <el-table-column prop="stem" label="标题" width="400">
            </el-table-column>
            <el-table-column prop="creator" label="作者">
            </el-table-column>
            <el-table-column prop="likeCount" label="点赞">
            </el-table-column>
            <el-table-column prop="views" label="浏览数">
            </el-table-column>
            <el-table-column prop="createdAt" label="更新时间" width="200">
            </el-table-column>
            <!-- 操作 -->
            <el-table-column label="操作" width="120px">
                <template #default="{ row }">
                  <div class="actions">
                    <i class="el-icon-view" @click="openDrawer('preview', row.id, )"></i>
                    <i class="el-icon-edit-outline" @click="openDrawer('edit', row.id)"></i>
                    <i class="el-icon-delete" @click="del(row.id)"></i>
                  </div>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination
        background
        @current-change="handleCurrentChange"
        :current-page="current"
        :page-size="pageSize"
        layout="prev, pager, next"
        :total="pageTotal"
        >
        </el-pagination>
      </el-card>
      <!-- 抽屉区域
       1. title="我是标题"
       2. :visible 控制显示隐藏
       3. :direction="direction"  控制方向
       4. :before-close="handleClose" 关闭抽屉前的处理逻辑 (比如：询问客户是否真的要关闭？)
       5. size="60%" 窗体所占的区域多宽
      -->

      <el-drawer
      :visible.sync="isShowDrawer"
      :before-close="handleClose"
      :title="drawerTitle"
      direction="rtl"
      size="60%"
      >
      <div v-if="drawerType === 'preview'" class="article-preview">
        <h5>{{ form.stem }}</h5>
        <div v-html="form.content"></div>
      </div>
      <el-form v-else ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="标题" prop="stem">
          <el-input  placeholder="输入面经标题" v-model="form.stem"></el-input>
        </el-form-item>
        <el-form-item label="内容" prop="content">
            <quill-editor v-model="form.content" @blur="$refs.form.validateField('content')">
            </quill-editor>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submit">确认</el-button>
          <el-button @click="handleClose">取消</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>
  </div>
</template>
  
  <script>
  // require styles
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'
import { getArticleList,createArticle,removeArticle,getArticleDetail,updateArticle } from '@/api/article'
import {Message} from 'element-ui'
  export default {
    name: 'article-page',
    data () {
        return {
            current: 1,
            pageSize: 10,
            pageTotal: 0,
            list: [],
            isShowDrawer: false,
            drawerType: '',

            form:{
                stem:'',//标题
                content:''//内容
            },

            rules: {
                stem: [{ required: true, message: '请输入面经标题', trigger: 'blur' }],
                content: [{ required: true, message: '请输入面经标题', trigger: 'blur' }]
            }
        }
    },
    created () {
        this.getDatas()
    },
    components: {
        quillEditor
    },
    computed: {
        drawerTitle () {
            let title = '大标题'
            if (this.drawerType === 'add') title = '添加面经'
            if (this.drawerType === 'preview') title = '面经预览'
            if (this.drawerType === 'edit') title = '修改面经'
            return title
        }
    },
    methods: {
      async getDatas () {
          const res = await getArticleList({
              current:this.current,
              pageSize:this.pageSize,
          })
          this.pageTotal=res.data.total
          this.list=res.data.rows
      },
      async del (id) {
        // 删除请求
        await removeArticle(id)
        // 添加成功的提示
        this.$message.success('删除成功')
        console.log(this.tableData)
        // 处理删除当前页的最后一条
        if (this.list.length === 1 && this.current > 1) {
          this.current--
        }
        // 重新渲染
        this.getDatas()
      },
      handleCurrentChange(val){
          // 处理当前页变化
          this.current = val
          //刷新一下列表
          this.getDatas()
      },
      async openDrawer (type, id) {
          // console.log(type, id)
          this.drawerType = type
          this.isShowDrawer = true
          if (type !== 'add') {
          const res = await getArticleDetail(id)
          this.form = {
            ...res.data
          }
        }
      },
      handleClose () {
        // 将form也手动重置
        this.form = {
          stem: '', // 标题
          content: '' // 内容
          }
          // 注意点: 由于公用的抽屉, 当预览时, 是没有表单的! 不能重置表单 
          if (this.drawerType !== 'preview') {
            // add edit 调用 resetFields 在此处的作用: 重置校验状态
            this.$refs.form.resetFields()
          }
          this.isShowDrawer = false
          // $confirm 可以弹出一个确认框，可确认.then  可取消.catch
          // this.$confirm('你确认要关闭么？').then(() => {
          //     done() // done() 调用，就代表关闭抽屉
          // }).catch((e) => {
          //     console.log('取消', e)
          // })
      },
      async submit () {
        try {
          // 校验表单
          await this.$refs.form.validate()
          // 如何区分, 当前是 编辑 还是 添加
          if (this.drawerType === 'add') {
            // 发送请求
            await createArticle(this.form)
            // 添加提示 $message.success
            this.$message.success('添加成功')
          }
          if (this.drawerType === 'edit') {
            // 发送的是编辑的请求
            const { id, stem, content } = this.form
            await updateArticle({ id, stem, content })
            this.$message.success('修改成功')
          }
          // 无论是修改还是添加, 都会回到第一页, 重置页码
          this.current = 1
          // 重新渲染
          this.getDatas()
          // 关闭弹框
          this.handleClose()
        } catch (e) {
          console.log(e)
        }
    },
  }
}
  </script>
  
  <style lang="scss" scoped>
  .el-card {
    margin-top: 25px;
    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-right: 16px;
    }
    .actions {
      font-size: 18px;
      display: flex;
      justify-content: space-around;
      color: #666;
      > i:hover {
        color: rgba(114, 124, 245, 1);
        cursor: pointer;
      }
    }
  }
  .el-pagination {
    margin-top: 20px;
    text-align: center;
  }
  .el-breadcrumb {
    margin-top: 10px;
  }
  .el-form {
    padding-right: 40px;
  }
  .quill-editor {
    ::v-deep .ql-editor {
      height: 300px;
    }
  }
  .el-rate {
    padding: 10px 0;
  }
  .article-preview {
    padding: 0 40px 40px 40px;
    > h5 {
      font-size: 20px;
      color: #666;
      border-bottom: 1px dashed #ccc;
      padding-bottom: 30px;
      margin: 0 0 20px 0;
    }
  }
  </style>
  